<template>
  <div class="home">
    <!--首页-->
    <div>
      <van-nav-bar
        title="首页"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!--轮播图-->
    <div>
      <van-swipe :autoplay="3000" class="my-swipe">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" width="412px" height="200px" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <!--公告-->
      <van-notice-bar
        scrollable
        text="公众号自XXXX年XX月XX日起,正式上线,欢迎物联网学院各实训班级使用!"
      />
    </div>
    <div>
      <!--路由模式标签栏-->
      <van-tabbar route v-model="active" @change="onChange">
        <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item replace to="/s" icon="records">答题</van-tabbar-item>
        <van-tabbar-item replace to="/b" icon="description"
          >成绩</van-tabbar-item
        >
        <van-tabbar-item replace to="/my" icon="manager-o"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //轮播图img地址
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
      //选择标签栏参数
      active: "",
    };
  },
  methods: {
    //首页导航返回按钮
    onClickLeft() {
      console.log("返回");
    },
    //标签栏监听事件
    onChange(index) {
      console.log(index);
    },
  },
  created() {},
};
</script>
<style>
.p-class-header {
  font-size: 40px;
  font-weight: 600;
}
.p-class-content {
  font-size: 30px;
}
.van-notice-bar {
  margin-top: 40px;
}
</style>